<template>
  <div id="photosPrintId" ref="printssssssssss"> 
    <div class="title">
      <span class="line"></span>
      <span><i class="el-icon-arrow-left" v-show="!showPhoto" style="margin-right:30px;cursor: pointer;font-size:18px;font-weight:1000;" @click="blackPhoto()"></i><i style="font-size:.1rem;" class="iconfont icon-tupian"></i> 相册</span>
    <span v-if="showPhoto" style="float: right;margin-right:20px;cursor: pointer;" @click="refresh"><i class="el-icon-refresh"></i>重新加载</span>
    </div>
    <!-- @scroll="handleScroll" -->
    <div  @scroll="handleScroll"  v-show="showPhoto" ref="photoList" class="photosContent">
      <!-- <img class="photoImagesBox" @click="openPhotoImages(item)" v-for="(item,index) in photoList" :key="index" :src="$IP+item.respath" width="33%" height="120" alt=""> -->
      <div style="width: 33%;height: 180px;float: left;margin-top: 3px;" v-for="(item,index) in photoList" :key="index">
        <img @error="handleImageError(index)" :ref="`img_${index}`" class="photoImagesBox" @click="openPhotoImages(item)"  :src="$IP+item.respath"  style="width: 100%;
          height: 100%;
          object-fit: cover;" alt="">
      </div>
      <div style="width: 33%;height: 120px;"></div>
      <div style="width: 33%;height: 120px;"></div>
      <div style="width: 33%;height: 120px;"></div>
      <div class="loadingBox" v-if="showLoading">
        <i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}
      </div>
      <!-- <div class="loadingBox" v-if="showLoading" style="color:#2196f3;cursor: pointer;" @click="loadPhoto"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div> -->
    </div>

    <div class="mapPage"  v-show="!showPhoto">
            <!-- <viewer class="photosContent1" :images="deiailsPhoto">
                <div class="image" v-for="(item,index) in deiailsPhoto" :key="index">
                  <img :src="$IP+item" width="100%" height="300" >
                </div>
            </viewer> -->
            <viewer class="photosContent1" :images="deiailsPhoto">
                <div class="image" v-for="(item,index) in deiailsPhoto" :key="index">
                  <img @error="handleImageError1(index)" :ref="`img_${index}`" :src="$IP+item"  style="width: 100%;
          height: 300px;
          object-fit: contain;" >
                </div>
            </viewer>
            <div class="mapBoxPosition" v-if="formateJW(itemData)" >
              <position v-if="modal2Visible" :position="position" />
            </div>
            <div ref="rightDteails" class="photosRightBoxInfoDetails">
            <h3 style="font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">照片信息:<el-link type="primary" style="margin-right:20px;margin-left:50px;" @click.stop="positionMessage(itemData)">定位到聊天</el-link></h3>
                <p><i class="el-icon-date"></i> 时间：{{formateDate(itemData.msgtime)}}</p>
                <p><i class="el-icon-picture-outline"></i> 来源：{{itemData.contactname}}</p>
                <!-- <p><i class="el-icon-pie-chart"></i>{{$t('wechat.imgSize')}}：{{(itemData.filesize/1048576).toFixed(3)}}MB ({{itemData.filesize}}Byte)</p> -->
                <!-- <p style="overflow: hidden;"><i class="el-icon-folder"></i>{{$t('wechat.fileName')}}：{{itemData.fileName}}</p> -->

                <!-- <p><i class="el-icon-map-location"></i>{{$t('wechat.la')}}：<span v-if="formateJW(itemData)">{{itemData.Longitude?((itemData.Longitude).substring(0,13)):''}}</span></p> -->
                <!-- <p><i class="el-icon-map-location"></i>{{$t('wechat.ln')}}：<span v-if="formateJW(itemData)">{{itemData.Latitude?((itemData.Latitude).substring(0,13)):''}}</span></p> -->
                <!-- <p><i class="el-icon-position"></i>{{$t('wechat.haiba')}}：<span v-if="formateJW(itemData)">{{itemData.Altitude?((itemData.Altitude).substring(0,13)):''}}</span></p> -->
                <p><i class="el-icon-lock"></i> MD5：{{itemData.filemd5}}</p>
              <p class="path" style="word-wrap: break-word;"><i class="el-icon-guide"></i>{{$t('wechat.imgPath')}}：{{itemData.path}}</p>
              <p class="path" style="word-wrap: break-word;" v-if="itemData.sourcepath!==''"><i class="el-icon-guide"></i> 原始路径：{{itemData.sourcepath}}</p>
                <!-- <div class="badgeBox" v-if="itemData.cntRemark>0">{{$t('wechat.remarked')}}</div> -->
                <!-- <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(itemData)" type="text" size="mini" style="margin-right:20px;float:right;color: #000;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button> -->
            </div>
    </div>
    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
// import print from "print-js";
import { getWxMediaInfo,getFormateCode } from '@/api/weChat/weChat_api'
import { parseTime } from '@/utils/index'
import position from '@/views/mainComponents/photoAlbum/gps.vue'
import GPS from '@/utils/GPS'
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';
export default {
  name: "wxAlbum2",
  props:['sendData'],
  components:{
    position
  },
  data() {
    return {
      errorSrc:require('../../../../assets/errorSrc.png'),
      requestPhoto:true,
      scrollTopData:0,
      showLoading:false,
      loadClass:'el-icon-refresh-right',
      loadingText:'点击加载',
      photoList:[],
      itemData:'',
      deiailsPhoto:[],
      showPhoto:true,
      alt:'',
      imgUrlList:[],
      src: require('../../../../assets/images/weChatQQ/bg.jpg'),
      srcList: [
      ],
      tableData: [],
      offset:1,
      limit:20,
      total:0,
      modal2Visible:false,
      position:'',
      showRemark:false,
      remark:'',
      id:'',
    };
  },
  watch:{
    '$store.state.account.weChat2':function(){
      // console.log(12,this.sendData)
      if(this.sendData.list_offset){
        this.requestPhoto = true;
        this.offset=1;
      this.limit=20*this.sendData.list_offset;
      }else{
        this.offset=1
      }
      this.showPhoto = true;
        this.photoList = [];
        this.init()
      }
  },
  created(){
    console.log(this.sendData)

    if(this.sendData.list_offset){
      this.requestPhoto = true;
      this.offset=1;
      this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1
    }
    // this.offset=1
    this.photoList = [];
    this.init()
  },
  methods: {
      handleImageError(index){
        const dom = this.$refs[`img_${index}`];
        dom[0].src = this.errorSrc;
      },
      handleImageError1(index){
        const dom = this.$refs[`img_${index}`];
        dom[1].src = require('../../../../assets/imgError.png');
      },
       // 定位到聊天
       positionMessage(item){
        
        this.showPhoto = true;
        // item['proof_num'] = this.sendData.proof_num;
        // item['username'] = sessionStorage.getItem('usernameTitle');
        // item['model'] = 'wechat';
        // item['msgtime'] = item.msgtime;
        // item['contact_username'] = item.contactname;
        // item['id'] = item.id;
        // item['list_offset'] = 1;
        // item['msg_offset'] = 1;
        // item['app_name'] = item.contactname.includes('@')?'群组':'好友';
        console.log(this.offset)
        item['proof_num'] = this.sendData.proof_num;
        item['username'] = sessionStorage.getItem('usernameTitle');
        item['model'] = 'wechat';
        item['msgtime'] = item.msgtime;
        item['contact_username'] = item.contactname;
        item['id'] = item.id;
        item['list_offset'] = this.offset;
        
        // item['list_offset'] = this.sendData.list_offset?this.sendData.list_offset:this.offset;
        item['msg_offset'] = 1;
        item['app_name'] = item.contactname.includes('@')?'群组':'好友';
        item['wxChildrenNode'] = true;
        item['scrollTop'] = this.scrollTopData;
        item['childrenModel'] = 'WXimg';
        item['account_id'] = this.sendData.account_id;
        
        // 储存类型
        sessionStorage.setItem('model',"wechat")
        // 储存节点数据
        sessionStorage.setItem('sumData',JSON.stringify(item))
        // 激活跳转组件
        this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
        sessionStorage.setItem('only',true);
      },
    refresh(){
      this.photoList = []
      this.offset=1;
      this.limit = 20;
      this.init()
    },
    handleScroll: throttle(function() {
    // 获取列表元素
    const list = this.$refs.photoList;
    this.scrollTopData = list.scrollTop;
    
    // 判断滚动到底部
    if (list.scrollTop + list.clientHeight + 20 >= list.scrollHeight) {
      this.showLoading = true;
      
      if (this.photoList.length < this.total) {
        this.loadClass = 'el-icon-loading';
        this.loadingText = '正在加载...';
        this.offset++;
        // 直接加载更多数据
        this.init();
      } else {
        this.loadClass = 'el-icon-success';
        this.loadingText = '到底了，没有更多了！';
      }
    }
  }, 300), // 增加节流时间为300ms
    loadPhoto(){
      this.requestPhoto = false;
      
      this.offset++;
      let that = this;
      this.loadClass = 'el-icon-loading';
      this.loadingText = '正在加载. . .';
      setTimeout(()=>{
        that.init()
      },2000)
    },
    blackPhoto(){
      this.showPhoto = true;
      this.deiailsPhoto = []
      this.modal2Visible=false;
    },
    openPhotoImages(item){
      this.itemData = item;
      this.showPhoto = false;
      this.deiailsPhoto = [];
      this.deiailsPhoto.push(item.respath);
      const mark=GPS.gcj_encrypt(Number(item.Latitude),Number(item.Longitude));
      this.position = '',
      this.position=mark;
      this.modal2Visible=true;
    },
        handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        app_name:this.id,
        account_id:'',
        subtype:this.sendData.subtype,
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.itemData.cntRemark = 1
        
        this.init()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    // 标记
    biaojiAction(){

    },
    formateJW(item){
      if(item.Longitude==0 || item.Longitude=='' || String(item.Longitude).indexOf('e')!==-1){
        return false
      }else{
        return true
      }
    },
    viewsMap(item){
      const mark=GPS.gcj_encrypt(Number(item.Latitude),Number(item.Longitude))
      this.position=mark
      this.modal2Visible=true
    },
    getRefsAff(){
      return  this.$refs.printssssssssss
    },
        formateDate(date){
      return parseTime(date)
    },
    init(){
      let data={
        proof_num:this.sendData.proof_num,
        account_id:this.sendData.account_id,
        offset:this.offset,
        limit:this.limit
      }
      getWxMediaInfo(data,'/tencent/img/list').then(res=>{
          this.showLoading=true;
          this.tableData=res.data
          if(res.data.length<2){
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
          }else{
            this.loadClass='el-icon-refresh-right';
            this.loadingText='下滑加载';
          }
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
              this.photoList.push(element)
          }
          if(this.sendData.app_name){
            for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              if(Number(element.id) == Number(this.sendData.app_name)){
                this.openPhotoImages(element)
              }
            }
          }
          try {
            this.total=res.data[0].cnt
            res.data.forEach(element => {
            this.srcList.push(element.path)
            });

            if(this.sendData.list_offset && this.requestPhoto){
              console.log('执行了',this.sendData.list_offset)
              this.$nextTick(() => {
                this.$refs.photoList.scrollTop=this.sendData.scrollTop;
              })
              let that = this;
              setTimeout(()=>{
                that.offset = that.sendData.list_offset
                that.limit = 20;
              },1500)
              
            }
          } catch (error) {
            this.total=0
          }
          
        })
    },
     //打印
        printPdf(index, row){
              printJS({
                printable: 'photosPrintId',
                type: 'html',
                targetStyles: ['*'],
                ignoreElements:['no-print','bc','gb']
              })
            },
    goPrint() {
      const tableNode = document.querySelectorAll(
        ".el-table__header,.el-table__body"
      );
      printJS({
        printable: "printCons",
        style: ".th{color:red;}",
        type: "html",
        header: "查询入库流水",
        scanStyles: false,
      });
    },
    handleSizeChange(val) {
        this.limit=val
        this.init()
      },
      handleCurrentChange(val) {
        this.offset=val
        this.init()
      }
  },
};
</script>
<style lang="scss">
@media print {
  .el-table {
    width: 100% !important;
    .el-table__body {
      width: 100% !important;
    }
    th {
      display: table-cell !important;
    }
    .cell {
      width: 100% !important;
    }
  }
}
.viewer-backdrop{
  background-color: #3b3b3b !important; /* 设置背景色 */
}
</style>
<style scoped>
.loadingBox{
  text-align: center;
  width: 100%;
}
.mapPage{
  height:800px;
  padding-bottom: 150px;
  overflow-y: auto;
}
.mapPage::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.mapPage::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.mapPage::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.image{
  width: 100%;
  height: 300px;
  position: relative;
}
  .orderBtn{
    position: absolute;
    top: 40px;
    right:0px;
  } 
  .orderBtn:hover{
    font-weight: bold !important;
    color: rgb(4, 92, 206) !important;;
  }
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  position: absolute;
  font-size: 12px;
  top: 5px;
  right: 20px;
}
.biaozhuimg{
  width: 80px;
  height: 80px;
  position: absolute;
  right: 50px;
}
#photosPrintId{
  position: relative;
}
.viewsLocation{
  position: absolute;
  top: 5px;
  right: 5px;
}
.path{
  position: relative;
  top:-5px;
  /* left: 10px; */
}
/* .demo-image__preview{
  overflow: hidden;
}
.demo-image__preview:hover .imgViewsPhotos{
  transition:all .5s linear;
  transform: scale(1.1);
} */
p{
  margin-bottom: 5px !important;
}
.photosInfoDetails {
  width: 100%;
  /* height: 50%; */
  margin: 1.3% auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 10px; */
  padding-left: 10px;
}

.photosLeftBox {
  width: 150px;
  height: 150px;
  /* border-bottom-left-radius: 5px; */
  /* border-top-left-radius: 5px; */
}
.photosRightBoxInfoDetails {
  position: relative;
  /* width: 655px; */
  height: 150px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 13px;
  /* padding: 0 10px; */
  /* margin-top: 30px; */
}
.photosRightBoxInfoDetails>p{
  padding-left:10px;
  min-height:25px;
  border-bottom:1px solid #ededed;
}
.photoItem {
  display: flex;
  height: 150px;
  justify-content: space-between;
  margin-top: 20px;
}
.photosContent {
  /* padding: 0 40px; */
  /* border-radius: 10px; */
  display: flex;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap
}

.photosContent::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.photosContent::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.photosContent::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 2px;
  font-size: .1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
.line {
  width: 8px;
  height: 100%;
}
.block {
  text-align: center;
  margin-top: 10px;
}
  .photosContent {
    /* padding: 0 2px; */
    height: 800px;
    padding-bottom: 50px;
    /* border-radius: 10px; */
    overflow-y: auto;
  }
  .photosContent1 {
    /* padding: 0 2px; */
    height: 40vh;
    /* padding-bottom: 50px; */
    /* border-radius: 10px; */
    overflow-y: auto;
  }
  .photosContent>img{
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom:2px;
  }
  .photosContent>img:hover {
    border-radius: 15px;
}


/* 当屏幕宽度大于2560时 */
  @media screen and (min-width: 2360px) {
    .photosInfoDetails>div{
      width: 2rem;
    }
    .photosInfoDetails {
    width:100%;
    height: 50%;
    margin: 4.3% auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .photosLeftBox {
    width: 150px !important;
    height: 100%;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .photosRightBoxInfoDetails {
    position: relative;
    width: 2.3rem;
    height: 100%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-weight: bold;
    color: #525252;
    padding-top: 10px;
    font-size: 12px;
  }
  .photoItem {
    display: flex;
    height: 170px;
    justify-content: space-between;
    /* margin-top: 50px */
  }

  .photosContent {
    padding: 0 5px;
    height: 99%;
    padding-bottom: 50px;

    /* border-radius: 10px; */
    overflow-y: auto;
  }
  
  .photosContent1 {
    padding: 0 5px;
    height: 370px;
    /* border-radius: 10px; */
    overflow-y: auto;
  }
  .mapBoxPosition{
  }
  .mapPage{
    height:90vh;
    padding-bottom: 150px;
    overflow-y: auto;
}
}

/* @media screen and (min-width: 3440px) {
  .photosContent {
    padding: 0 5px;
    height: 61vh;
    padding-bottom: 150px;

    overflow-y: auto;
  }
  
} */
</style>